<template>
    <el-row>
        <el-col :span="12">
            <div id="title">
                牙周疾病智能评价系统
            </div>

        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="4">
            <div id="login">
                <el-button
                    type="primary"
                    @click="handleLogin"
                    style="font-size: 16px"
                    text>
                    {{username}}
                </el-button>
            </div>
        </el-col>
    </el-row>
    <LoginPage
        :visible=login_visible
        @close="closeLoginPage"
        @turn_2_register="turn2Register"
        @login_success="loginSuccess"
        ></LoginPage>
    <RegisterPage
        :visible=register_visible
        @close="closeRegisterPage"
        @turn_2_login="turn2Login"
        ></RegisterPage>
</template>

<script>
import LoginPage from "@/components/LoginPage.vue";
import RegisterPage from "@/components/RegisterPage.vue";

export default {
    name: "MainMenu",
    components: {RegisterPage, LoginPage},
    data() {
        return {
            login_visible: false,
            register_visible: false,
        }
    },
    methods: {
        openLoginPage: function() {
            this.login_visible = true
        },
        closeLoginPage: function() {
            this.login_visible = false
        },
        openRegisterPage: function () {
            this.register_visible = true
        },
        closeRegisterPage: function () {
            this.register_visible = false
        },
        turn2Register: function () {
            this.closeLoginPage()
            this.openRegisterPage()
        },
        turn2Login: function () {
            this.closeRegisterPage()
            this.openLoginPage()
        },
        handleLogin: function () {
            if (this.is_login == false) {
                this.openLoginPage()
            } else {
                this.go2Profile()
            }
        },
        loginSuccess: function (username, type) {
            console.log(type)
            this.$store.state.username = username
            this.$store.state.is_login = true
            if (type === 1) {
                console.log('xxx')
                this.$store.state.is_login_patient = true
            } else if (type === 2) {
                this.$store.state.is_login_dentist = true
            }
            this.closeLoginPage()

        },
        go2Profile: function () {
            this.$router.replace('/profile')
        },
    },
    computed: {
        is_login: function () {
            return this.$store.state.is_login
        },
        is_login_patient: function () {
            return this.$store.state.is_login_patient
        },
        is_login_dentist: function () {
            return this.$store.state.is_login_dentist
        },
        username: function () {
            if (this.$store.state.username.length == 0) {
                return '登录'
            } else {
                return this.$store.state.username
            }
        }
    },
    created() {
        document.body.style.overflow = 'hidden'
    }
}
</script>

<style scoped>
#title {
    text-align: start;
    margin-left: 30px;
    font-weight: bold;
    font-size: 24px;
}
#login {
    text-align: center;
    font-size: 16px;
}
</style>